<template>
  <div id="meeting">  
    <div  style="display:flex;align-items: center;">
            <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
            <div style="line-height: 40px;font-weight:bold:">福利专区</div>
    </div> 
  <el-form ref="form"  label-width="70px">  

    <div style="display:flex;">
          <div style="flex:1;display:flex;align-items: center;">

          <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">查询项</div>
            <el-form-item label="账户查询">
              <el-input v-model="form.phone" placeholder="姓名/手机号"  style="width:140px;"></el-input>
            </el-form-item>

            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:10px;background:#FFC600;color:white;" @click="search_but1()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:10px;border:1px solid #D9D9D9;" @click="sx_but()">清 空</div>    
            </div>

         </div>

     </div>

     <el-row>
        <el-col :span="24" style="text-align: right;"> 
            <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" @click="mtk2_but()">
             <img class="custom_color_button1_img" src="@/assets/images/but_bg3.png" />奖品管理
            </el-button>  
           <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" @click="mtk1_but()">
             <img class="custom_color_button1_img" src="@/assets/images/but_bg3.png" />获奖条件
            </el-button>  
            <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" v-if="export_type" @click="output()">
             <img class="custom_color_button1_img" src="@/assets/images/but_bg2.png" />导出
            </el-button>  
             <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" v-if="!export_type" @click="output1()">
             <img class="custom_color_button1_img" src="@/assets/images/but_bg2.png" />可导出
            </el-button>       
        </el-col>
      </el-row>



  </el-form >

   <!-- 渲染数据list -->
   <welfare-list :datalist="datalist" @up_list_fun="list_fun"> </welfare-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>


    <!-- 获奖条件 -->
    <el-dialog title="获奖条件" :visible.sync="mtk1"  width="600px">
        <div style="width:100%;"> 

           <el-form ref="form"   label-width="70px" style="width:100%;">  

              <el-form-item label="开始时间" >
                    <el-date-picker type="date" style="width:100%;"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="mtk1_form.start" ></el-date-picker>
              </el-form-item>  

              <el-form-item label="结束时间" >
                    <el-date-picker type="date"  style="width:100%;"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="mtk1_form.end" ></el-date-picker>
              </el-form-item> 

              <el-form-item label="抢拍标的">
                     <el-select  v-model="mtk1_form.select_num_zy" placeholder="请选择"  style="width:100%;">
                      <el-option  v-for="(item,index) in select_data_zy" :key="index" :label="item.title" :value="item.maid"></el-option>
                     </el-select>
              </el-form-item>

              <el-form-item label="活动形式">
                 <el-input type="textarea" v-model="mtk1_form.content"></el-input>
               </el-form-item>

               <!-- 富文本选取图片 -->
                <!-- <el-form-item label="内容详情" style="">
                    <div style="">
                        <quill-editor class="editor"
                            v-model="mtk1_form.content" 
                            ref="myQuillEditor" 
                            :options="editorOption" 
                            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)" style="height:150px;margin-bottom:100px;">
                        </quill-editor>
                    </div>
                </el-form-item> -->
            <!-- 富文本选取图片 -->
            <!-- <el-form-item label="" v-show="false" >  
                <el-upload                                                
                    action="uploadUrl"  
                    :show-file-list="false"   
                    :before-upload="beforeupload"
                    :http-request="ImgUploadSectionFile">
                        <el-button slot="trigger" size="small" type="primary" id="selectImg">选取文件</el-button>
                </el-upload>
            </el-form-item> -->
               

            </el-form>
            <div style="text-align: center;width:50%;margin:auto;margin-top:60px;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="mtk1_qr_but()">确认</el-button>
            </div>

        </div> 
    </el-dialog>


       <!-- 奖品管理 -->
    <el-dialog title="奖品管理" :visible.sync="mtk2"  width="450px">
        <el-form ref="form" label-width="100px">
            <el-form-item label="奖品名称">
                    <el-input v-model="mtk2_form.title" placeholder="必填" ></el-input>
             </el-form-item> 

             <el-form-item label="奖品图片">
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload1"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="pic_form1.head_img"  :src="pic_form1.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                </el-form-item>

                <el-form-item label="奖品详情">
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload3"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="pic_form3.head_img"  :src="pic_form3.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                </el-form-item>


            <div style="text-align: center;width:50%;margin:auto;margin-top:10px;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="mtk2_qr_but()">确认</el-button>
            </div>

         </el-form>
    </el-dialog>


     <!-- 导出表格数据表格 -->
        <el-table v-show="false" :data="datalist1" id="mytable1" style="width: 100%;height:10px;">
             <el-table-column label="领取时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ getymdhms(scope.row.time * 1000) }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="账号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="地址信息"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.address_info">{{ scope.row.address_info[0].username }}-{{ scope.row.address_info[0].telphone }}-{{ scope.row.address_info[0].region }}{{ scope.row.address_info[0].detail }}</span>
                    </template>
                </el-table-column>
        </el-table> 


  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import toolbarOptions from '@/assets/js/quillConfig.js'
import WelfareList from '@/view/Activitynew/Welfare/WelfareList'
export default {
  name: 'welfare',
  data () {
    return {
        datalist:[{"name":"aaaa"}],
        datalist1:[],
        export_type:true,
        page:1,
        count:0,
        form:{
            phone:'',

        },  
        mtk1:false,
        mtk1_form:{
            select_num_zy:'',
            start:'',
            end:'',
            content:'',
            upfile:'',
        },
        select_data_zy:[],
        mtk2:false,
        mtk2_form:{
            title:''
        },
         pic_form1:{
           head_img:'',
           upfile:'',
        },
        pic_form3:{
           head_img:'',
           upfile:'',
        },
        editorOption: {//富文本
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // alert('自定义图片')
                    document.getElementById("selectImg").click();    //调用选择图片
                    
                  } else {
                   // this.quill.format('image', false);
                  }
                }
              }
            }
           }       
        },

    }
  },
 components:{
    WelfareList
  },
  created(){
     this.list_fun()
     this.list_zy()
  },
  mounted (){
    
  },
  methods: { 
      list_zy(){
        this.post("/manor/manorOption", {
        }).then(res => { 
            this.select_data_zy = res.result     
            //console.log(this.select_data_zy)                  
        })
      },
      list_fun(){
           this.post("/welfare/listOfWinPrize", {
              page:this.page,
              account:this.form.phone,
              is_all:0,//分页
	         }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
           
               for(let item of this.datalist) {
                   if(item.address_info != 0){
                        item.ads = item.address_info[0].username + '-' + item.address_info[0].telphone + '-' + item.address_info[0].region  + item.address_info[0].detail
                   }else{
                        item.ads = ''
                   }
               }
            console.log(this.datalist)
          })
      },
      list_fun1(){
           this.post("/welfare/listOfWinPrize", {
              page:this.page,
              account:this.form.phone,
              is_all:1,//全部
	         }).then(res => {
            // this.count = res.result.count
            this.datalist1 = res.result.list
            this.export_type = false
            // console.log(res,"aaaaa")
          })
      },
      output(){
         this.list_fun1()
      },
      output1(){
          var wb = XLSX.utils.table_to_book(document.querySelector("#mytable1"));//mytable为表格的id名
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              new Blob([wbout], { type: "application/octet-stream" }),
              "sheet.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
      },
      gift_fun(){
          this.post("/welfare/giftData", {

	         }).then(res => {
                 
               this.mtk2_form.title =   res.result.name
               this.pic_form3.head_img =  this.urlimg + res.result.details_icon
               this.pic_form3.upfile =  res.result.details_icon

               this.pic_form1.head_img =  this.urlimg + res.result.icon
               this.pic_form1.upfile =  res.result.icon

              // console.log(res,"奖品数据")
          })
      },
      demand_fun(){
          this.post("/welfare/demandData", {

	         }).then(res => {
                 
                this.mtk1_form.select_num_zy = res.result.limit_maid
                this.mtk1_form.content = res.result.describe

                this.mtk1_form.start = this.getNowDateSjc(res.result.limit_user_createtime * 1000)
                this.mtk1_form.end = this.getNowDateSjc(res.result.limit_user_endtime * 1000)
                // this.mtk1_form.start = 
                // this.mtk1_form.end = res.result.limit_user_endtime

              // console.log(res,"获奖要求数据")
          })
      },
      mtk1_but(){
          this.demand_fun()
          this.mtk1 = true
      },
      mtk1_qr_but(){

          this.post("/welfare/setDemandInfo", {
                    limit_user_createtime:this.mtk1_form.start,
                    limit_user_endtime: this.mtk1_form.end,
                    limit_maid:this.mtk1_form.select_num_zy,
                    describe:this.mtk1_form.content
                }).then(res => {

                    if(res.error_code == 0){
                      this.mtk1 = false
                      this.demand_fun()
                     this.open1(res.result,'success')  //提示框
                    }else {
                     this.open1(res.message,'warning')
                }

         })

      },
      mtk2_but(){
          this.gift_fun()
          this.mtk2 = true
      },
      mtk2_qr_but(){

          this.post("/welfare/setGiftInfo", {
                    name:this.mtk2_form.title,
                    icon:this.pic_form1.upfile,
                    details_icon:this.pic_form3.upfile
                }).then(res => {

                    if(res.error_code == 0){
                      this.mtk2 = false
                      this.gift_fun()
                     this.open1(res.result,'success')  //提示框
                    }else {
                     this.open1(res.message,'warning')
                }

         })

      },
      search_but1(){
        this.page = 1
        this.list_fun()
      },
      sx_but(){
        this.form={
            phone:'',
        }
        this.page = 1
        this.list_fun()
      },
       onEditorBlur(){ //富文本
     },
     onEditorFocus(){//富文本获得焦点事件
     },
     onEditorChange(){//富文本内容改变事件
      //console.log(this.xg_school.content)
     },
     ImgUploadSectionFile(param){//图片上传    
     },
     beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
            this.mtk1_form.upfile = res.result.url   
            this.mtk1_form.content = this.mtk1_form.content +'<img src="'+  this.urlimg + this.mtk1_form.upfile +'"/>'

           })

          return false;
      },
      beforeupload1(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form1.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form1.upfile = res.result.url    
            })

            return false;

     },
     beforeupload3(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form3.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form3.upfile = res.result.url    
            })

            return false;

     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>
  .buttoon_box{
  display:flex;margin-bottom:10px;
}
.buttoon_box_item{
  height:40px;line-height:40px;width:60px;font-size:14px;text-align:center;border-radius:5px;
}
.el-input-box>>>input{
  padding: 0px 3px !important;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>
